


import React, { useEffect } from 'react'
import { Carousel, Card } from 'antd'
import "./index.scss"
import { Row } from 'antd';
import { Col } from 'antd';
import user from '../../mobx/store/user';
import { observer } from 'mobx-react';
import { toJS } from "mobx"
import { baseURL } from '../../api/request';
import banner from '../../mobx/store/banner';


function Home() {

    const { bannerList, changebannerList, vipgetbannerList } = banner

    useEffect(() => {
        getAnnoListAsync({})
        changebannerList({})
    }, [])
    const { annoList, getAnnoListAsync, getAnnoList } = user
    console.log(annoList.slice());


    console.log(bannerList);

    const contentStyle: any = {
        height: '300px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
    };


    // if (annoList.recommended == true) {

    // }



    const { Meta } = Card;
    return (
        <div>
            <div style={{ width: '100%', margin: 'auto', }}>
                <Carousel autoplay>
                    {
                        bannerList.map((l: any, i: any) => (
                            <div>
                                <h3 style={contentStyle} >
                                    <img src={l.img.replace(/public/, baseURL)} style={{ height: "100%", width: "100%" }} />
                                </h3>
                            </div>


                        ))
                    }


                    {/* <div>
                        <h3 style={contentStyle}>
                            <img src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" />
                        </h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>
                            <img src="https://t7.baidu.com/it/u=12235476,3874255656&fm=193&f=GIF" alt="" />
                        </h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>
                            <img src="https://t7.baidu.com/it/u=4155241395,1627827382&fm=193&f=GIF" />
                        </h3>
                    </div> */}
                </Carousel>
            </div >



            <div className="site-card-border-less-wrapper" style={{ width: "100%", display: "flex", justifyContent: "space-around" }}>

                {/* 内容 */}

                {
                    JSON.parse(JSON.stringify(annoList)).map((l: any, i: any) => {


                        if (l.recommended == true) {
                            return (
                                <Row >
                                    <Col>

                                        <Card title={l.title} size="small" hoverable bordered={false} style={{ width: 240 }} cover={<img style={{ width: "100%", height: '200px' }} alt="example" src={l.desc.replace(/public/, baseURL)} />}>
                                            <Meta title={l.content} />
                                        </Card>
                                    </Col>
                                </Row>

                            )
                        }


                    })

                }

            </div>
        </div >
    )
}

export default observer(Home)
